import { Avatar, Col, Row } from 'antd'
import './index.less'
import { UserOutlined } from '@ant-design/icons';
import React from 'react';
import { createGradient } from '../_utils/color';
interface ItemsProps{
   label:React.ReactNode
   value:React.ReactNode
}
interface DataCardProps {
    icon?: React.ReactNode
    color?: 'green' | 'cyan' | 'blue' | 'geekblue' | 'purple' | 'orange'|string
    items: ItemsProps[]
    title: React.ReactNode
}



const DataCard = ({ title, icon, color = 'green', items }: DataCardProps) => {

    const gradientColor = createGradient((color))
    return <Row

        wrap={false}
        style={{
            background: `linear-gradient(to right, ${gradientColor[3]}  0%, ${gradientColor[2]}  90%,${gradientColor[1]} 100%)`
        }}
        className={` card-data-container`}
    >
        <Col className='card-data-wrap'>
            <div className='card-data-icon' style={{
                color:gradientColor[gradientColor.length-1]
            }}>{icon}</div>
        </Col>
        <Col className='card-data-body' flex="auto">
            <div className='card-data-title'>{title}</div>
            <div className='card-data-desc'>
                {items.map((item, index) => {
                    return <div key={index}>
                        <span>{item.label}:</span>
                        <span>{item.value}</span>
                    </div>
                })}
            </div>


        </Col>
    </Row>
}
export default DataCard;